<template>
  <div>
    <el-autocomplete
      class="inline-input wid220"
      v-model="brand"
      clearable
      @clear="Clear()"
      ref="searchSelect"
      :fetch-suggestions="
        (queryString, cb) => {
          querySearchAsync(queryString, cb);
        }
      "
      :placeholder="placeholder"
      :trigger-on-focus="false"
      @select="
        item => {
          handleSelect(item);
        }
      "
      ><template slot-scope="{ item }">
        <div class="main_name">
          <span class="code">{{ item.title }}</span>
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
import { goods_likeData } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  props: {
    url: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "商品品牌"
    }
  },
  data() {
    return {
      brand: ""
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { brand: queryString.trim() })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        { brand: queryString.trim() }
      );

      goods_likeData(data).then(res => {
        if (res.errcode == 0) {
          let results = [];
          results = res.data;
          if (this.$refs.searchSelect) {
            this.$refs.searchSelect.activated = true;
          }
          cb(results);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    handleSelect(item) {
      this.brand = item.title;
      this.$emit("sendValue", item);
    },
    Clear() {
      this.$emit("clear");
    },
    focus() {
      this.$refs["searchSelect"].focus();
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.main_name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: initial;
  padding: 0 0;
  height: 40px;
  .code {
    color: #999;
  }
}
</style>
